<!DOCTYPE html>
<html>
<head>
    <style>
        .oneline{
            width: 150px;
            height: 80px;
            background-color: orange;
            margin: 100px auto;
            /* 文字显示不开自动换行 */
            /* white-space: normal; */
            /* 文字q强制在一行内显示 */
            white-space: nowrap;
            overflow: hidden;
            /* 文字溢出时用省略号显示 */
            text-overflow: ellipsis;
        }
        .multipleline{
            width: 150px;
            height: 80px;
            margin: 100px auto;
            background-color: orange;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 文本行数限制 */
            -webkit-line-clamp: 2;
            /* 伸缩盒子对象子元素排列方式 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div class="oneline">啥也不说，此处省略一万字</div>

    <div class="multipleline">margin 属性为给定元素设置所有四个（上下左右）方向的外边距属性。也就是 margin-top，margin-right，margin-bottom，和 margin-left 四个外边距属性设置的简写。</div>
</body>
</html>